<template>
  <div class="page page-current ns-filmDetail">
    <!-- <footer class="ns-footer">
      <div class="ns-footer-button">
        特惠购票
      </div>
    </footer> -->
    <div class="ns-wrap">
      <div class="ns-container ns-container-header">
        <!--<div class="ns-film-bc"></div>-->
        <div class="ns-container-header-content">
          <div class="ns-container-header-img">
            <img :src="detailObj.avatar" alt="" id="avatar">
          </div>
          <div class="container-header-top">
            <div class="container-header-top-bg" :style="{background: `url(${detailObj.avatar})`}">

            </div>
            <div class="ns-film-name">
              <div class="ns-bigSize">{{detailObj.name}}</div>
              <span>{{detailObj.englishName}}</span>
            </div>
            <div class="ns-film-info">
              <div>{{detailObj.category}}</div>
              <div>{{detailObj.source}}/{{detailObj.duration}}分钟</div>
              <div>{{detailObj.pubDesc}}</div>
            </div>
          </div>
          <div class="ns-film-score">
            <div class="ns-film-padding">
              <div class="ns-flex">
                <span class="ns-bigSize">{{detailObj.score}}</span>
                <div class="ns-star" v-html="starImg()">

                </div>
              </div>
              <div class="ns-midSize ns-gray ">猫眼评分{{detailObj.scoreNum}}人</div>
            </div>
          </div>
        </div>
      </div>
      <div class="ns-container innerCtn ns-text-padding" id="innerCtn">
        <div class="mui-ellipsis-3">
          {{detailObj.drama}}
        </div>
        <img class="ns-text-more" src="../../static/img/more.png">
      </div>
     <movieSliderList :movieSliderProps="flatSliderCelebritiesData" :propSlidesPerView="4" :propsClass="`swiperCelebrities`" :propsTitle="`演职人员`"  ></movieSliderList>
     <movieSliderList :movieSliderProps="flatSliderPhotosData"  :propSlidesPerView="3" :propsClass="`swiperPhotos`" :propsPic="true"  :propsTitle="`视频剧照`"  ></movieSliderList>
    </div>
  </div>
</template>

<script>
  import movieSliderList from '../components/movieSliderList';  
  import commonMoudle from '../../static/js/common.js';
  export default {
    data() {
      return {
        hideSomething: true,
        detailObj: {},
        infoObj: false,
        evalLists: [],
        flatSliderCelebritiesData:[],
        flatSliderPhotosData:[],
      }
    },
    mounted() {
      let $this = this;

      let _args = {
        filmid: 249875
      };
      let headers = commonMoudle.createHead(true, false, {}, _args);

      commonMoudle.doPostForm('', function success(data) {
        console.log('____--', data.data)
        $this.detailObj = JSON.parse(data.data.result);
        $this.detailObj.avatar = $this.detailObj.avatar.replace('http:', 'https:').replace('/w.h/', '/128.0/')
        $this.flatArray($this.detailObj.celebrities);
        $this.flatPhotosArray($this.detailObj.photos);
      }, function () {}, true, '/film/getfilmdetail', commonMoudle.createHead(true, false, {}, _args), $this.$qs.stringify(
        _args))
    },
    components: {
      movieSliderList
      // hotEvaluation
    },
    methods: {
      flatArray(Array_) {          
          let $this = this;
          Array_.forEach((ele,i) => {
            let count = 0;
            if (ele.role == '导演') {
              ele.list.forEach((element,i) => {
                count ++;
                element.role = '导演';
                element.avatar = element.avatar.replace('http:','https:').replace('/w.h/', '/100.0/');
                $this.flatSliderCelebritiesData.push(element);
              })
            } else if(ele.role == '演员') {
              ele.list.forEach((element,i) => {
                if (element.avatar) {
                  if (count++ > 12) return;
                  element.avatar = element.avatar.replace('http:','https:').replace('/w.h/', '/100.0/');
                  $this.flatSliderCelebritiesData.push(element);
                }
              })
            }             
          });
      },
      flatPhotosArray(Array_) {          
          let $this = this;
          let count = 0;
          Array_.forEach((ele,i) => {
            if (ele.tlink) {             
              count ++ ;   
              ele.avatar = ele.tlink.replace('http:','https:').replace('/w.h/', '/100.0/');    
              $this.flatSliderPhotosData.push(ele);
            }

          });
      },
      starImg() {
        var starsHtml = '';
        var score = this.detailObj.score;
        score = score / 2;
        for (var i = 0; i < 5; i++) {
          if (score >= 1) {
            starsHtml += '<img src="../../static/img/star-full.png" alt="">';
          } else if (score >= 0.5 && score < 1) {
            starsHtml += '<img src="../../static/img/star-half.png" alt="">';
          } else {
            starsHtml += '<img src="../../static/img/star-none.png" alt="">';
          }
          score--;
        }
        return starsHtml;
      }
    }
  }

</script>

<style scoped>
  .ns-container {
    margin-bottom: 6px;
    background-color: #fff
  }

  .ns-container label {
    font-size: 1rem;
    font-weight: 700;
    display: block;
    color: #000
  }

  .container-header-top-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position-y: 40%;
    background-size: cover;
    z-index: 1000;
    -webkit-filter: blur(30px);
    filter: blur(30px)
  }

  .container-header-top-bg:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: #40454d;
    opacity: .65
  }

  .ns-container:last-child {
    margin-bottom: 0
  }

  .ns-container-header {
    position: relative
  }

  .ns-film-bc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 9.5rem;
    background: #40454d;
    opacity: .8;
    background-size: cover
  }

  .ns-container-header-img {
    position: absolute;
    width: 35%;
    background: #3e3e3e;
    border-radius: .3rem;
    -webkit-box-shadow: 5px 5px 14px rgba(52, 52, 52, .5);
    box-shadow: 5px 5px 14px rgba(52, 52, 52, .5);
    top: 19px;
    left: 16px;
    bottom: 16px;
    max-height: 85%;
    z-index: 2000
  }

  .ns-container-header-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }

  .ns-container-header-img:after {
    content: '';
    padding-top: 142%;
    display: block
  }

  .ns-container-header-content {
    z-index: 1;
    color: #fff
  }

  .ns-container-header-content .container-header-top {
    position: relative;
    padding-left: 45%;
    padding-top: 25px;
    padding-bottom: 10px;
    overflow: hidden
  }

  .ns-container-header-content .ns-film-padding {
    line-height: 1;
    color: #000
  }

  .ns-container-header-content .ns-film-padding .ns-flex {
    margin-bottom: 6px
  }

  .ns-bigSize {
    font-size: 1rem
  }

  .ns-midSize {
    font-size: .65rem
  }

  .ns-film-name {
    position: relative;
    margin-bottom: 24px;
    font-size: .6rem;
    line-height: 1;
    z-index: 2000
  }

  .ns-film-name div {
    margin-bottom: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1
  }

  .ns-film-name div:last-child {
    margin-bottom: 0
  }

  .ns-film-info {
    position: relative;
    z-index: 2000
  }

  .ns-film-info div {
    font-size: .65rem;
    line-height: 1;
    margin-bottom: 6px
  }

  .ns-film-info div:last-child {
    margin-bottom: 0
  }

  .ns-film-score {
    padding-top: 12px;
    padding-bottom: 16px;
    padding-left: 45%;
    width: 100%;
    color: #1c1b20
  }

  .ns-star {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-item-align: center;
    align-self: center;
    padding-left: 8px
  }

  .ns-star img {
    width: 16px;
    height: 16px;
    margin-right: 3px
  }

  .ns-star img:last-child {
    margin-right: 0
  }

  .mui-ellipsis-3 {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.5;
    height: 4rem
  }

  .innerCtn {
    font-size: .875rem
  }

  .ns-text-padding {
    padding: 16px 16px 32px 16px
  }

  .ns-text-more {
    width: 14px;
    position: absolute;
    left: 50%;
    margin-left: -7px;
    margin-top: .5rem
  }

  .transform {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
  }

  .ns-label-padding {
    padding: 14px 0 14px 16px
  }

  .ns-actorCells {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: auto
  }

  .ns-actorCells::-webkit-scrollbar {
    display: none
  }

  .ns-actorCells .ns-cell {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    font-size: 13px;
    padding-right: 8px
  }

  .ns-actorCells .ns-cell:last-child {
    padding-right: 0
  }

  .ns-cell-img {
    width: 5rem;
    background-color: #888;
    position: relative;
    border-radius: .25rem
  }

  .ns-cell-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }

  .ns-cell-img:after {
    content: '';
    display: block;
    padding-top: 142%
  }

  .ns-cell-label {
    display: block;
    padding-top: .375rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 5rem
  }

  .ns-cell-label:first-child {
    padding-top: 20px
  }

  .ns-cell-pic {
    width: 7rem;
    position: relative;
    background-color: #888;
    border-radius: .25rem
  }

  .ns-cell-pic img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }

  .ns-cell-pic:after {
    content: '';
    display: block;
    padding-top: 77%
  }

  .ns-href {
    font-size: .8rem;
    text-align: right;
    padding-right: 16px;
    color: #888;
    -ms-flex-item-align: center;
    align-self: center
  }

  @media screen and (max-width: 400px) and (min-width: 330px) {
    .ns-bigSize {
      font-size: 1.25rem;
    }
  }
  @media (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 667px) and (min-device-width: 375px)
  {
    .ns-container-header-img {
        width: 34%;
    }
    .ns-container-header-content .container-header-top {
        padding-left: 42%;
    }
    .ns-film-score {
        padding-left: 42%;
    }
  }
  .ns-footer+.ns-wrap {
      bottom: 50px;
  }
  .ns-wrap {
      position: absolute;
      top: 0;
      bottom: 0;
      overflow: auto;
      left: 0;
      right: 0;
  }
</style>
